<template>
  <div class="racedetail-breadcrumb">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/race-list' }">赛事列表</el-breadcrumb-item>
      <el-breadcrumb-item>当前页面</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="race-detail" >
    <div class="container" v-loading="loading" element-loading-text="Loading..." element-loading-background="rgb(255,255,255,0.95)">
      <div class="top">
        <h1 class="title">{{ title }}</h1>
        <div class="title-detail">
          <div>{{ academy }}</div>
          <div>发布时间：{{ publishTime }}</div>
          <div>发布者：{{ author }}</div>
          <div>类型：{{ type }}</div>
        </div>
      </div>

      <div class="content">
        <img v-lazy="cover" v-show="cover" class="cover">
        <div class="rich-text" v-html="richText"></div>
        <div class="btn-box" v-show="userInfo.token">
          <SubmitButton round @click="toRaceWorks" color="#8f92ff" class="detail-btn" value="查看作品" />
          <SubmitButton round @click="openRegContest" color="#78e26c" class="detail-btn" value="报名比赛" />
        </div>
      </div>
      <CommentBody v-if="refresh" :replyId="contestId" :replyContent="replyContent" />

    </div>

    <div class="hot-race-list">
      <h2 style="text-align: center; padding-bottom: 20px">热门赛事</h2>
      <UserRace v-for="(item, index) in hotRaceArr" :key="index" :raceId="item.contestId"
        :imgUrl="item.contestProfileSmallPath" :name="item.name" :publisher="item.nickName"
        :start_time="item.regStart" />
    </div>
    <RegContest ref="regContest" :raceName="title" :raceType="type" :raceAcademy="academy" />
  </div>
</template>

<script setup>
import { computed, onBeforeMount, onMounted, ref, watch } from "vue";
import CommentBody from "@/components/CommentArea/CommentBody.vue";
import SubmitButton from "@/components/RepackageComponent/SubmitButton.vue";
import UserRace from "@/components/UserRace.vue";
import { GetContestInfo, GetMyRace, GetHot } from "@/api/front/contest";
import { useRoute } from "vue-router";
import RegContest from "./RegContest.vue";
import store from "@/store";
import { ElMessage } from "element-plus";
import router from "@/router";

const loading = ref(true)
const refresh = ref(true)
const userInfo = store.state.userInfo;
const route = useRoute();
const contestId = ref(parseInt(route.params.id))
// 如果route.params.id变了，就重新获取数据
watch(() => route.params.id, () => {
  if (route.params.id === contestId.value) return
  contestId.value = parseInt(route.params.id)
  if (isNaN(contestId.value)) return
  getContestInfo()
  // 刷新评论区
  refresh.value = false
  setTimeout(() => {
    refresh.value = true
  }, 0);
  getHot()
  handleMyRace()
})

const isReg = ref(false)
const status = ref(0)
const richText = ref('');
const title = ref("");
const academy = ref("");
const publishTime = ref("");
const author = ref("");
const type = computed(() => {
  switch (typeId.value) {
    case 0:
      return "理工";
    case 1:
      return "外语";
    case 2:
      return "文体";
    case 3:
      return "商科";
    case 4:
      return "综合";
    default:
      return "未知";
  }
})
const typeId = ref();
const cover = ref("");
const replyContent = 1
const hotRaceArr = ref([
  {
    id: 1,
    cover: "",
    title: "某某大赛1",
    publisher: "某某某",
    time: "2023-04-09"
  },
  {
    id: 2,
    cover: "https://img0.baidu.com/it/u=3364111863,1779585219&fm=253&fmt=auto&app=138&f=JPEG?w=1024&h=499",
    title: "某某大赛2",
    publisher: "某某某",
    time: "2023-06-11"
  },
  {
    id: 3,
    cover: "https://img0.baidu.com/it/u=3364111863,1779585219&fm=253&fmt=auto&app=138&f=JPEG?w=1024&h=499",
    title: "某某大赛3",
    publisher: "某某某",
    time: "2023-06-09"
  },
  {
    id: 4,
    cover: "https://img0.baidu.com/it/u=3364111863,1779585219&fm=253&fmt=auto&app=138&f=JPEG?w=1024&h=499",
    title: "某某大赛4",
    publisher: "某某某",
    time: "2023-04-04"
  }
])

const regContest = ref(null)
const openRegContest = () => {
  if (userInfo.role !== 'teacher') {
    ElMessage.warning('只有老师才能报名比赛')
    return
  }
  if (isReg.value) {
    ElMessage.warning('您已经报名了该比赛')
    return
  }
  if (status.value === 2) {
    ElMessage.warning('该比赛已经结束')
    return
  }
  const data = {
    id: contestId.value,
    raceName: title.value,
    raceType: type.value,
    raceAcademy: academy.value
  }
  regContest.value.openDialog(data)
}

const toRaceWorks = async () => {
  if (status.value === 0) {
    ElMessage.warning('该比赛还未开始')
    return
  }
  store.commit('setRaceWorksState', true)
  router.push('/works/' + contestId.value)
}

const getHot = async () => {
  const res = await GetHot()
  // console.log("hot", res)
  hotRaceArr.value = res.data
}
const getContestInfo = async () => {
  const res = await GetContestInfo({
    id: contestId.value
  })
  const resData = res.data[0]
  console.log("contestINfo", res)
  title.value = resData.name
  academy.value = resData.academy
  publishTime.value = resData.createTime
  author.value = resData.nickName
  typeId.value = resData.contestType
  cover.value = resData.contestProfileSmallPath
  richText.value = resData.contestDetail
  status.value = resData.status
  loading.value = false
}

const handleMyRace = async () => {
  const res = await GetMyRace({
    userContestId: userInfo.userId
  })
  // console.log("myRace", res)
  const myRaceList = res.data
  // 如果已经报名
  if (myRaceList.some(item => item.contestId === contestId.value)) {
    isReg.value = true
  } else {
    isReg.value = false
  }

}
onBeforeMount(() => {
  getContestInfo()
  getHot()
})

onMounted(() => {
  window.scrollTo(0, 0)
  handleMyRace()
})

</script>



<style scoped lang="scss">
.racedetail-breadcrumb {
        margin: 2% 0 0 14%;
    }
.cover {
  width: 100%;
  height: 300px;
  color: #78e26c;
}

.race-detail {
  width: 100%;
  position: relative;
  display: flex;
  padding: 20px 13%;

  .container {
    max-width: 1024px;
    flex: 1;
    margin: 0 auto;
    margin-right: 0;
    border-radius: 10px;
    box-shadow: 1px 2px 6px #bbb;
    padding: 10px 20px;

    .top {
      text-align: center;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .title {
        margin-bottom: 20px;
      }

      .title-detail {
        display: flex;
        justify-content: space-between;
        padding: 0 30px;
        width: 90%;
        font-weight: 100;
        font-size: 15px;
        // min-width: 600px;
      }
    }

    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      padding: 0 20px;

      .rich-text {
        // box-sizing: border-box;
        width: 100%;
        display: flex;
        flex-direction: column;

        :deep(*) {
          width: inherit;
        }

      }

      .btn-box {
        display: flex;
        padding: 30px;

        .detail-btn {
          font-size: 18px;
          width: 150px;
          height: 50px;
        }
      }
    }
  }

  .hot-race-list {
    width: 300px;
    margin: 0 auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    h2 {
      font-weight: bold;
      margin-top: 10px;
    }

    .user-race {
      width: 250px;
      margin: 0 0 30px 0px;
    }

    // .hot-race {
    //   width: 250px;
    //   height: 160px;
    //   // border: 1px solid black;
    //   border-radius: 10px;
    //   box-shadow: 1px 1px 7px #BBBBBB;
    //   margin-bottom: 30px;

    //   .hot-race-cover {
    //     width: 250px;
    //     height: auto;
    //     border-radius: 10px 10px 0 0;
    //   }

    //   .hot-race-title {
    //     padding-left: 10px;
    //     font-size: 20px;
    //     font-weight: bold;
    //   }

    //   .hot-race-time {
    //     padding-left: 50%;
    //     color: gray;
    //   }
    // }
  }

  @media screen and (max-width: 1124px) {
    .hot-race-list {
      display: none;
    }

  }
}
</style>